<template>
	<view class="border-top tabbar-box" :style="{
					backgroundColor:tabbarBoxStyle.background_color,
					borderRadius:`${tabbarBoxStyle.border_radius}px ${tabbarBoxStyle.border_radius}px 0 0`,
					borderTop:tabbarBoxStyle.border_color?'0.5px solid '+tabbarBoxStyle.border_color:'none',
					boxShadow: `0 0 ${tabbarBoxStyle.dom}px rgba(0, 0, 0, 0.05)`,
					height: (boxHeight + 110) + 'rpx'
				}">
		<view class="tabbar-box-content flex-spb-cn">
			<view class="tabbar-item flex-cn-cn" v-for="(item,index) in tabbarList" :key="index" @click="changeTab(index)">
				<view class="tabbar-item-content flex-col-cn-cn">
					<view class="qh-rt-single icon" v-if="item.type==1" :style="{
						color:index==selectIndex?clickColor:notClickColor,
					}" :class="[item.icon]"></view>
					<view class="qh-rt-single icon" v-if="item.type==2">
						<image mode="aspectFill" class="itabbar-item-img" v-if="index==selectIndex" :src="item.click_url" >
						</image>
						<image mode="aspectFill" class="itabbar-item-img" v-else :src="item.url" >
						</image>
					</view>
					<view class="tabbar-item-text" 
						:style="{
							color:index==selectIndex?clickColor:notClickColor,
						}"
					>{{item.name}}</view>
					<view class="tabbar-item-badge" v-if="item.link==4 && badge>0">{{badge > 999 ? '999+' : badge}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex:0,
				
				tabbarList: [],
				tabbarBoxStyle:{
					background_color:"", // 背景颜色
					border_color:"", // 边框颜色
					border_radius:"", // 边框圆角
					dom:"", // 阴影模糊度
					color_status:0, // 是否开启自定义选中颜色 
					not_click_color:"", // 未选中颜色
					click_color:"", // 选中颜色
				},
				allLink: [{
						index: 1,
						name: "首页",
						link: "/pages/mer/tabbar/home/home",
						
					}, {
						index: 2,
						name: "分类",
						link: "/pages/mer/tabbar/category/category"
					},
					{
						index: 3,
						name: "门店",
						link: "/pages/mer/tabbar/store/store"
					},
					{
						index: 4,
						name: "购物车",
						link: "/pages/mer/tabbar/shoppingCar/shoppingCar"
					},
					{
						index: 5,
						name: "我的",
						link: "/pages/mer/tabbar/my/my",
					}
				]
			}
		},
		props: {
			current: {
				type: [Number, String],
				default: 0
			}, // 页面的类型数据说明
		},
		created: function(res) {
			this.getNavigationConfig();
		},
		computed:{
			boxHeight(){
				return this.$store.bottomHeight
			},
			badge(){
				return this.$store.merShoppingGoodsList.length // 购物车的下标数量
			},
			clickColor(){
				// 使用自定义的颜色
				if(this.tabbarBoxStyle.color_status==1){
					return this.tabbarBoxStyle.click_color;
				}else{
					// 使用主题颜色
					return 'var(--primary-color)';
				}
			},
			notClickColor(){
				// 使用自定义的颜色
				if(this.tabbarBoxStyle.color_status==1){
					return this.tabbarBoxStyle.not_click_color;
				}else{
					// 使用主题颜色
					return "#333333";
				}
			},
		},
		methods: {
			changeTab(index) {
				if (index != this.selectIndex) {
					if (this.current == 0) {
						//第一个菜单栏页打开其它菜单栏
						uni.navigateTo({
							url: this.tabbarList[index].page,
						})
					} else if (this.tabbarList[index].link-1 == 0) {
						//打开第一个页面
						let pages = getCurrentPages();
						let len = pages.length;
						if (len >= 2 && ('/' + pages[len - 2].route) === this.tabbarList[0].page) {
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.reLaunch({
								url: this.tabbarList[index].page,
							})
						}
					} else {
						//非第一个页面相互打开
						uni.redirectTo({
							url: this.tabbarList[index].page,
						})
					}
				}
			},
			getNavigationConfig() {
				return new Promise(async resolve => {
					try {
						let diyNavigation = this.$store.diy_navigation;
						if(diyNavigation.length>0){
							this.tabbarList = diyNavigation;
							this.tabbarBoxStyle = this.$store.tabbarBoxStyle;
							// 处理选择效果
							let index = this.tabbarList.findIndex(item => this.current == item.link-1);
							if (index >= 0) {
								this.selectIndex = index;
							}
							this.$nextTick(() => {
								resolve(true);
							});
						}else{
							const {
								status,
								data
							} = await this.$request('DiyStore/Api/getNavigationConfig', {
								needErrorMsg: false
							});
							if (status == 1) {
								let navData = JSON.parse(data.nav_data);
								this.tabbarList = navData.map(res => {
									res.page = this.allLink[res.link-1].link;
									res.name = res.text
									return res;
								});
								// 赋值样式数据
								this.tabbarBoxStyle = {
									background_color:data.background_color, // 背景颜色
									border_color:data.border_color, // 边框颜色
									border_radius:data.border_radius, // 边框圆角
									dom:data.dom ,// 阴影模糊度
									color_status:data.color_status,
									not_click_color:data.not_click_color,
									click_color:data.click_color,
								}
								let index = this.tabbarList.findIndex(item => this.current == item.link-1);
								if (index >= 0) {
									this.selectIndex = index;
								}
								this.$store.diy_navigation = this.tabbarList;
								this.$store.tabbarBoxStyle = this.tabbarBoxStyle;
								this.$nextTick(() => {
									resolve(true);
								});
							} else {
								resolve(false);
							}
						}
					} catch (err) {
						// 接口出问题了 速速变回之前的导航栏
						console.log("自定义导航栏异常",err);
						this.$emit("error");
						resolve(false);
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.tabbar-box {
		position: relative;
		z-index: 100;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		.tabbar-box-content {
			height: 110rpx;
			width: 100vw;
			// overflow: hidden;

			.tabbar-item {
				flex: 1;
				height: 100%;

				.tabbar-item-content {
					position: relative;
					display: inline-flex;
				}

				.icon {
					font-size: 40rpx;
					color: #333333;
				}

				.tabbar-item-text {
					font-size: 22rpx;
					line-height: 32rpx;
					margin-top: 10rpx;
					color: #333333;
				}

				.selected {
					color: var(--primary-color);
					
				}
				.itabbar-item-img{
					width: 40rpx;
					height: 40rpx;
				}
				.tabbar-item-badge {
					position: absolute;
					top: -20rpx;
					right: -16rpx;
					background-color: red;
					font-size: 22rpx;
					line-height: 24rpx;
					color: #fff;
					text-align: center;
					border-radius: 18rpx;
					padding: 4rpx 10rpx;
				}
			}
		}
	}
</style>
